<template>
	<view class="page-container">
		
		<view class="apply-quantity-block">
			<view class="title-bar">提现金额</view>
			<view class="input-bar">
				<text class="unit">&yen;</text>
				<input :class="['usable', usable ? 'bold' : '']" type="digit" v-model="usable" placeholder="请输入提现金额" placeholder-class="placeholder" />
			</view>
			<view class="msg-bar">可提现余额{{amount}}元，<text class="c-green" @click="allIn">全部提现</text></view>
		</view>
		
		<view class="table-view-group">
			<view class="table-cell-block">
				<view class="table-cell-block__hd">
					<text v-if="way === 'alipay'">支付宝账号</text>
					<text v-if="way === 'bank'">银行卡号</text>
					<text v-if="way === 'weixin'">微信账号</text>
				</view>
				<view class="table-cell-block__bd">
					<input type="text" class="input-text" v-model="cardNumber" placeholder="请输入收款账号" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="table-cell-block">
				<view class="table-cell-block__hd">
					<text v-if="way === 'bank'">账户名</text>
					<text v-else>真实姓名</text>
				</view>
				<view class="table-cell-block__bd">
					<input type="text" class="input-text" v-model="accountName" placeholder="请输入收款户名" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="table-cell-block" v-if="way === 'bank'">
				<view class="table-cell-block__hd">开户银行</view>
				<view class="table-cell-block__bd">
					<input type="text" class="input-text" v-model="bankName" placeholder="请输入收款账号" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="table-cell-block">
				<view class="table-cell-block__hd">备注说明</view>
				<view class="table-cell-block__bd">
					<textarea class="item-input" v-model="remarks" placeholder="备注" placeholder-class="placeholder" auto-height />
				</view>
			</view>
		</view>
		
		<button class="submit-apply-btn" :class="{'disabled': !submitStatus}" @click="submitApply">提交</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				way: '',
				usable: '',
				amount: '',
				bankName: '',
				cardNumber: '',
				accountName: '',
				remarks: '',
				submitStatus: true,
			}
		},
		onLoad(options) {
			this.way = options.way;
			this.getMemberInfo()
		},
		methods: {
			
			// 获取用户钱包金额
			async getMemberInfo(){
				let params, memberRes;
				params = {
					method: "api/v2/member/info/show"
				}
				memberRes = await this.$http(params);
				if(memberRes.status){
					this.amount = (Number(memberRes.data.money) - Number(memberRes.data.money_frozen)).toFixed(2)
				}
			},
			
			// 全部提现
			allIn(){
				this.usable = this.amount
			},
			
			// 提交
			submitApply(){
				if(!this.submitStatus)
				{
					return false;
				}
				
				if(!this.usable){
					uni.showToast({
						title: "提现金额不能为空!",
						icon: "none"
					})
					return false
				}
				
				if(!this.cardNumber){
					uni.showToast({
						title: "收款账号不能为空!",
						icon: "none"
					})
					return false
				}
				
				if(!this.accountName){
					uni.showToast({
						title: "收款人不能为空!",
						icon: "none"
					})
					return false
				}
				
				if(!this.bankName && this.way === 'bank'){
					uni.showToast({
						title: "开户行不能为空!",
						icon: "none"
					})
					return false
				}
				
				this.submitStatus = false;
				
				this.sendRequest()
			},
			
			// 提现请求
			async sendRequest(){
				let params, sendRes;
				params = {
					method: "api/v2/member/bag/withdraw_audit",
					withdrawamount: this.usable,
					bankname: this.bankName,
					bankcardnumber: this.cardNumber,
					bankaccountname: this.accountName,
					description: this.remarks,
					way: this.way
				}
				sendRes = await this.$http(params);
				if(sendRes.status){
					uni.showToast({
						title: "申请提现成功!",
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						})
					}, 1000)
				}else{
					this.submitStatus = true;
					uni.showToast({
						title: sendRes.msg,
						icon: "none"
					})
				}
			}
			
		}
	}
</script>

<style lang="scss">

	.page-container{
		padding: 20rpx 24rpx;
	}
	
	.apply-quantity-block{
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color;
		.title-bar{
			padding: 18rpx 0;
			font-size: $uni-font-size-base;
		}
		.input-bar{
			display: flex;
			align-items: center;
			padding: 8rpx 0;
			border-bottom: 2rpx solid $uni-border-color;
			.unit{
				font-size: 46rpx;
				font-weight: bold;
			}
			.usable{
				height: 84rpx;
				line-height: 84rpx;
				margin-left: 12rpx;
				font-size: $uni-font-size-base;
				font-family: Arial, Helvetica, sans-serif;
				&.bold{
					font-size: 60rpx;
					font-weight: bold;
				}
			}
		}
		.msg-bar{
			color: $uni-text-color-grey;
			padding: 24rpx 0 10rpx;
			font-size: $uni-font-size-sm;
			.c-green{
				color: $uni-text-color-primary;
			}
		}
	}

	.table-view-group{
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color;
	}
	.table-cell-block{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
		position: relative;
		&:after{
			content: "";
			position: absolute;
			right: 0;
			left: 0;
			bottom: 0;
			height: 1px;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: $uni-border-color;
		}
		&:last-child:after{
			display: none;
		}
		&__hd{
			flex: 0 0 auto;
			width: 180rpx;
			font-size: $uni-font-size-base;
		}
		&__bd{
			flex: 1 1 auto;
		}
	}
	
	.item-input{
		width: 450rpx;
		font-size: $uni-font-size-base;
	}
	.input-text{
		font-size: $uni-font-size-base;
	}
	
	.submit-apply-btn{
		color: #fff;
		padding: 4rpx 0;
		margin-top: 24rpx;
		font-size: 32rpx;
		border-radius: $uni-border-radius-lg;
		background: #2dbb55;
	}
	.submit-apply-btn.disabled{
		background: $uni-bg-color-disabled;
	}
</style>
